<template>
  <div class="zjb_sex">
      <!-- 性别页面布局开始 -->
        <div class="zjb_sex_head">
            <!-- tou -->
            <p @click="zjb_sex_go"> &lt; </p>
            <p>性别</p>
            <p @click="zjb_sex_bao">保存</p>
            <!-- tou -->
        </div>
        <div class="zjb_sex_con">
            <ul>
                <li v-for="(v,i) in arr" :key="i">
                    <p @click="arr_sex(v)">{{v}}</p>
                </li>
            </ul>
        </div>

      <!-- 性别页面布局结束 -->
  </div>
</template>

<script>
import http from '../../http/http';//--->引入封装好的axios直接读取数据
export default {
    name:'Sex',
    data(){
        return{
            arr:['男','女'],
            sex:''
        }
    },
    methods:{
        zjb_sex_go(){//-->点击箭头，返回上一页
            this.$router.go(-1);
        },
        arr_sex(v){
            if(v=='男'){
                this.sex=0;
            }else{
                this.sex=1; 
            }
        },
        async zjb_sex_bao(){//--->点击保存
        var token= this.$store.state.User.token;
        // var sex=await http('put','https://test.365msmk.com/api/app/user',{ sex:this.sex},{ headers: {Authorization: "Bearer " + token}})
        // sex.then(ret=>{
        //     console.log(ret);
        //     if(ret.data.code==200){
        //             this.$router.go(-1)
        //         }
        // })
        // console.log(sex)
            this.axios.put("https://test.365msmk.com/api/app/user",{
                sex:this.sex
            },{
                 headers: {Authorization: "Bearer " + token }
            }).then((ret)=>{
                console.log(ret)
                if(ret.data.code==200){
                    this.$router.push('/information')
                }
            })
        }
    }
}
</script>

<style lang="scss">
.zjb_sex{
    width: 100%;
    height: 100%;
    font-size: .16rem;
    line-height: .2rem;
}
.zjb_sex_head{
    height: .6rem;
    display: flex;
    align-items: center;
    background: #ccc;
    &>p{
        font-size: .25rem;
        margin-left: .2rem;
    }
    &>p:nth-child(2){
        width: 5rem;
        height: auto;
        text-align: center;
        // border: 1px solid #000;
    }
}
.zjb_sex_con{
    ul{
        li{
            height: .4rem;
            line-height: .4rem;
            font-size: .2rem;
            
        }
        li:hover{
                background: yellow;
            }
        
    }
}
</style>